<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>github+hexo构建自己的博客 | 清风向阳</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="Joker,Joker's Blog" />
  
  <meta name="description" content="宽敞漂亮的房子是每个人的追求，而对于我们的程序员来说，还需要一个自己的个人空间，那里记录了自己的汗水，记录着折磨过几天的天坑，是我们吃一堑长一智的见证，所有我们要追求一个高大上的地方，来存放自己的一片天地。">
<meta name="keywords" content="other">
<meta property="og:type" content="article">
<meta property="og:title" content="github+hexo构建自己的博客">
<meta property="og:url" content="http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/index.html">
<meta property="og:site_name" content="清风向阳">
<meta property="og:description" content="宽敞漂亮的房子是每个人的追求，而对于我们的程序员来说，还需要一个自己的个人空间，那里记录了自己的汗水，记录着折磨过几天的天坑，是我们吃一堑长一智的见证，所有我们要追求一个高大上的地方，来存放自己的一片天地。">
<meta property="og:updated_time" content="2017-09-15T07:00:33.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="github+hexo构建自己的博客">
<meta name="twitter:description" content="宽敞漂亮的房子是每个人的追求，而对于我们的程序员来说，还需要一个自己的个人空间，那里记录了自己的汗水，记录着折磨过几天的天坑，是我们吃一堑长一智的见证，所有我们要追求一个高大上的地方，来存放自己的一片天地。">
  
  
    <link rel="icon" href="/favicon_pic.ico">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
  

</head>

<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-menu" class="header-menu-pos animated">
            <div class="header-menu-container">
                <a href="/" class="left">
                    <span class="site-title">Joker&#39;s Blog</span>
                </a>
                <nav id="header-menu-nav" class="right">
                    
                    <a  href="/">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                    
                    <a  href="/archives">
                        <i class="fa fa-archive"></i>
                        <span>Archives</span>
                    </a>
                    
                    <a  href="/about">
                        <i class="fa fa-user"></i>
                        <span>About</span>
                    </a>
                    
                </nav>
                <a class="mobile-header-menu-button">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/images/avatar.jpg" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        Joker&#39;s Blog
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        一个认真的技术博客
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Joker"  href="//joker-studio.pub">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com/mjjde">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>
      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-github-hexo构建自己的博客" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      github+hexo构建自己的博客
    </h1>
    <div class="post-title-bar">
      <ul>
          
              <li>
                  <i class="fa fa-book"></i>
                  
                      <a href="/categories/其他技术/">其他技术</a>
                  
              </li>
          
        <li>
          <i class="fa fa-calendar"></i>  2015-12-09
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <blockquote>
<p>宽敞漂亮的房子是每个人的追求，而对于我们的程序员来说，还需要一个自己的个人空间，那里记录了自己的汗水，记录着折磨过几天的天坑，是我们吃一堑长一智的见证，所有我们要追求一个高大上的地方，来存放自己的一片天地。<br><a id="more"></a></p>
</blockquote>
<p>接下来我们就来建造一个属于自己的房子：github+hexo</p>
<p>那么我们建造的房子到底如何呢,<a href="http://jokero1o.github.io" target="_blank" rel="external">我们先睹为快</a>吧~</p>
<p>首先我们要搭建这样的个人博客需要2个材料要准备</p>
<h3 id="Github"><a href="#Github" class="headerlink" title="Github"></a><a href="#Github" title="Github"></a>Github</h3><p>对于一个码农来说，没有一个属于自己的github账号那就太不怀兴了.</p>
<ol>
<li>如果还没有的就赶紧去<a href="https://github.com" target="_blank" rel="external">注册</a>个吧。</li>
<li>我们已经有账号了就去看看github为我们准备的<a href="https://pages.github.com/" target="_blank" rel="external">GitHub Pages</a>吧，按照指引我们就可以完成地基的搭建</li>
</ol>
<h4 id="注意事项："><a href="#注意事项：" class="headerlink" title="注意事项："></a><a href="#u6CE8_u610F_u4E8B_u9879_uFF1A" title="注意事项："></a>注意事项：</h4><ol>
<li>创建的repository name 必须和你的用户名一致为username.github.io后缀也不能改，如果想不用自己的用户名可以新创建organization，在下面创建repository username为organization的名称。</li>
<li>根据指引在clone 项目到本地后创建一个html界面，如果访问<a href="http://username.github.io" target="_blank" rel="external">地址</a>成功了，那个改步骤结束</li>
</ol>
<h3 id="Hexo"><a href="#Hexo" class="headerlink" title="Hexo"></a><a href="#Hexo" title="Hexo"></a>Hexo</h3><p>既然我们的房子已经建成，那么我们就要给它添砖加瓦，变得更漂亮，ok！</p>
<h4 id="hexo的安装"><a href="#hexo的安装" class="headerlink" title="hexo的安装"></a><a href="#hexo_u7684_u5B89_u88C5" title="hexo的安装"></a>hexo的安装</h4><p>首先请出<a href="https://hexo.io/zh-cn/docs/index.html" target="_blank" rel="external">hexo官方文档</a><br>我们可以在这里进行hexo的安装，安装完hexo后你就应该具备git,node环境了，并且根据上个步骤的操作，你的本地已经clone了一份GitHub上的代码了。</p>
<h4 id="hexo和Github-Page的融合"><a href="#hexo和Github-Page的融合" class="headerlink" title="hexo和Github Page的融合"></a><a href="#hexo_u548CGithub_Page_u7684_u878D_u5408" title="hexo和Github Page的融合"></a>hexo和Github Page的融合</h4><p>首先是hexo的初始化，将hexo的主题导入Github Page中，</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="meta">$</span><span class="bash"> hexo init &lt;folder&gt;</span></div><div class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> &lt;folder&gt;</span></div><div class="line"><span class="meta">$</span><span class="bash"> npm install</span></div></pre></td></tr></table></figure>
<p>需要注意的是到cd到clone目录下面进行操作。还有就是上面的命令没反应，原因是..长城墙。。可以装cnpm 或者翻墙，下面的命令一样。</p>
<p>接下来我们可以用Sublime来打开我们的项目，以后方便管理，好了我们的项目的结果基本是下面的样子</p>
<figure class="highlight sqf"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">.</div><div class="line">├── <span class="variable">_config</span>.yml</div><div class="line">├── package.json</div><div class="line">├── scaffolds</div><div class="line">├── source</div><div class="line">|   ├── <span class="variable">_drafts</span></div><div class="line">|   └── <span class="variable">_posts</span></div><div class="line">└── themes</div></pre></td></tr></table></figure>
<p>其中_config.yml我们称为站点config，source存放我们草稿，themes存放的是我我们的主题，接下吗我们要git的next的主题将会存放在这里。</p>
<p>好了，我们大致熟悉了结构后就要开始配置hexo了，地点当然是_config.yml了<br>请出我们文档的相关<a href="https://hexo.io/zh-cn/docs/configuration.html" target="_blank" rel="external">索引</a>我们要关心的就几个地方</p>
<ul>
<li>title 网站标题</li>
<li>description 可以是名言什么的</li>
<li>author 作者</li>
<li>language 语言</li>
<li>deploy:<br>type: git<br>repository: <a href="https://github.com/username/username.github.io.git" target="_blank" rel="external">https://github.com/username/username.github.io.git</a><br>branch: master</li>
</ul>
<p>上面的地址改为你的地址，好了，我们现在可以测试下了</p>
<p>执行以下命令</p>
<figure class="highlight ebnf"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="attribute">hexo g</span></div><div class="line">hexo s</div></pre></td></tr></table></figure>
<p>这里可能有会有错误提示Error: Deployer not found : git<br>可以在项目目录下执行</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install</span> hexo-deployer-git <span class="comment">--save</span></div></pre></td></tr></table></figure>
<p>再来一次!<br>在浏览器上输入</p><p><a href="http://0.0.0.0:4000" target="_blank" rel="external">http://0.0.0.0:4000</a></p>就可以看到我们带默认主题的hexo了，接下来我们要部署要GitHub上去还记得我们在_config.yml配置了deploy吗，这就是用来部署的配置<p></p>
<figure class="highlight ebnf"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="attribute">hexo g</span></div><div class="line">hexo d</div></pre></td></tr></table></figure>
<p>我们现在在输入</p>
<p><a href="http://username.github.io，" target="_blank" rel="external">http://username.github.io，</a></p>
<p>一切ok，进入我们更换next主题</p>
<h4 id="nexT主题"><a href="#nexT主题" class="headerlink" title="nexT主题"></a><a href="#nexT_u4E3B_u9898" title="nexT主题"></a>nexT主题</h4><p>首先还是介绍next<a href="http://theme-next.iissnan.com/five-minutes-setup.html" target="_blank" rel="external">文档</a></p>
<p>在项目目录下clone next</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> your-hexo-site</span></div><div class="line"><span class="meta">$</span><span class="bash"> git <span class="built_in">clone</span> https://github.com/iissnan/hexo-theme-next themes/next</span></div></pre></td></tr></table></figure>
<p>现在next主题已经clone到我们themes下面了。<br>根据文档的指引进行一些简单的配置，基本上我们的个人博客也就搭建完成了</p>
<p>下面介绍如何新建一篇文章：</p>
<ol>
<li>在我们的项目地址上执行</li>
<li>$ hexo new [layout]</li>
<li>hexo g</li>
<li>hexo d</li>
</ol>
<p>第二步后会在source的草稿目录里会有个md文件，在 Mac OS X 上，我强烈建议你用 <a href="http://25.io/mou/" target="_blank" rel="external">Mou</a> 这款免费且十分好用的 Markdown 编辑器，它支持实时预览，既左边是你编辑 Markdown 语言，右边会实时的生成预览效果</p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2017年09月15日 15:00</p>
        <p>原始链接： <a class="post-url" href="/2015/12/09/github-hexo构建自己的博客/" title="github+hexo构建自己的博客">http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/</a></p>
        <footer>
            <a href="http://mjjde.github.io">
                <img src="/images/avatar.jpg" alt="Joker Mei">
                Joker Mei
            </a>
        </footer>
    </div>
</div>

      
    </div>
    <footer class="article-footer">
        
        
<div class="post-share">
    <a href="javascript:;" id="share-sub" class="post-share-fab">
        <i class="fa fa-share-alt"></i>
    </a>
    <div class="post-share-list" id="share-list">
        <ul class="share-icons">
          <li>
            <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/&title=《github+hexo构建自己的博客》 — 清风向阳&pic=http://mjjde.github.ioimages/avatar.jpg" data-title="微博">
              <i class="fa fa-weibo"></i>
            </a>
          </li>
          <li>
            <a class="weixin share-sns" id="wxFab" href="javascript:;" data-title="微信">
              <i class="fa fa-weixin"></i>
            </a>
          </li>
          <li>
            <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/&title=《github+hexo构建自己的博客》 — 清风向阳&source=
宽敞漂亮的房子是每个人的追求，而对于我们的程序员来说，还需要一个自己的个人空间，那里记录了自己的汗水，记录着折磨过几天的天坑，是我们吃一堑长一智的见证，..." data-title="QQ">
              <i class="fa fa-qq"></i>
            </a>
          </li>
          <li>
            <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/" data-title="Facebook">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li>
            <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《github+hexo构建自己的博客》 — 清风向阳&url=http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/&via=http://mjjde.github.io" data-title="Twitter">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li>
            <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/" data-title="Google+">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        </ul>
     </div>
</div>
<div class="post-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;" id="wxShare-close">×</a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=http://mjjde.github.io/2015/12/09/github-hexo构建自己的博客/" alt="微信分享二维码">
</div>

<div class="mask"></div>

        
        <ul class="article-footer-menu">
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/other/" class="color1">other</a>
      
  </li>

        </ul>
        
    </footer>
  </div>
</article>


    <aside class="post-toc-pos post-toc-top" id="post-toc">
        <nav class="post-toc-wrap">
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#Github"><span class="post-toc-text">Github</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#注意事项："><span class="post-toc-text">注意事项：</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#Hexo"><span class="post-toc-text">Hexo</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#hexo的安装"><span class="post-toc-text">hexo的安装</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#hexo和Github-Page的融合"><span class="post-toc-text">hexo和Github Page的融合</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#nexT主题"><span class="post-toc-text">nexT主题</span></a></li></ol></li></ol>
        </nav>
    </aside>
    

<nav id="article-nav">
  
    <a href="/2015/12/11/Volley-网络通讯框架一之发起请求/" id="article-nav-newer" class="article-nav-link-wrap">

      <span class="article-nav-title">
        <i class="fa fa-hand-o-left" aria-hidden="true"></i>
        
          Volley 网络通讯框架一之发起请求
        
      </span>
    </a>
  
  
</nav>



    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by  <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2018 Joker Mei<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "http://mjjde.github.io",
      animate: false,
      isHome: false,
      share: true
  }
</script>
<div class="sidebar">
    <!-- <div id="sidebar-search" title="Search">
        <i class="fa fa-search"></i>
    </div> -->
    <div id="sidebar-category" title="Categories">
        <i class="fa fa-book"></i>
    </div>
    <div id="sidebar-tag" title="Tags">
        <i class="fa fa-tags"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box" id="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-categories">
            <a class="category-link" href="/categories/Android技术/">Android技术</a><a class="category-link" href="/categories/其他技术/">其他技术</a><a class="category-link" href="/categories/网络技术/">网络技术</a><a class="category-link" href="/categories/设计模式/">设计模式</a>
        </div>
        <div id="sidebar-menu-box-tags">
            <a href="/tags/Activity/" style="font-size: 10px;">Activity</a> <a href="/tags/Android/" style="font-size: 16px;">Android</a> <a href="/tags/Android-IPC/" style="font-size: 10px;">Android-IPC</a> <a href="/tags/Binder/" style="font-size: 16px;">Binder</a> <a href="/tags/DiskLruCache/" style="font-size: 10px;">DiskLruCache</a> <a href="/tags/Fragment/" style="font-size: 10px;">Fragment</a> <a href="/tags/HTTP/" style="font-size: 20px;">HTTP</a> <a href="/tags/Java/" style="font-size: 10px;">Java</a> <a href="/tags/Notification/" style="font-size: 10px;">Notification</a> <a href="/tags/RemoteView/" style="font-size: 10px;">RemoteView</a> <a href="/tags/Rxjava/" style="font-size: 14px;">Rxjava</a> <a href="/tags/ServiceManager/" style="font-size: 14px;">ServiceManager</a> <a href="/tags/android/" style="font-size: 12px;">android</a> <a href="/tags/gradle/" style="font-size: 10px;">gradle</a> <a href="/tags/java/" style="font-size: 18px;">java</a> <a href="/tags/other/" style="font-size: 10px;">other</a> <a href="/tags/volley/" style="font-size: 12px;">volley</a> <a href="/tags/widget/" style="font-size: 10px;">widget</a> <a href="/tags/事件/" style="font-size: 10px;">事件</a> <a href="/tags/组件化/" style="font-size: 10px;">组件化</a> <a href="/tags/设计模式/" style="font-size: 18px;">设计模式</a>
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="mobile-header-menu-nav" id="mobile-header-menu-nav">
    <div id="mobile-header-menu-container">
        <span class="title">Menu</span>
        <ul class="mobile-header-menu-navbar">
            
            <li>
                <a  href="/">
                    <i class="fa fa-home"></i><span>Home</span>
                </a>
            </li>
            
            <li>
                <a  href="/archives">
                    <i class="fa fa-archive"></i><span>Archives</span>
                </a>
            </li>
            
            <li>
                <a  href="/about">
                    <i class="fa fa-user"></i><span>About</span>
                </a>
            </li>
            
        </ul>
    </div>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
    <div class="search-container" id="search-container">
        <ul class="search-result" id="search-result">
        </ul>
    </div>
</div>

<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/main.js"></script>








  </div>
</body>
</html>